<template>
  <div>
    <div v-for="(obj, index) in arr" :key="obj.id" class="box">
      <span :class="cla(index)">{{ obj.id }}</span>
      <span :class="cla(index)">{{ obj.finished }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["arr"],
  methods: {
    cla(index) {
      // console.log(this.arr[index].finished);
      if (this.arr[index].finished == "成功") {
        return "right";
      } else if (this.arr[index].finished == "错误") {
        return "error";
      } else {
        return "undo";
      }
    },
  },
};
</script>

<style scoped>
.box {
  display: inline-block;
  margin-right: 10px;
}
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>